<template>
	<view class="page-box">
		<scroll-view class="index-item" scroll-y show-scrollbar>
			<Banner :bannerList="bannerList" />
			<view class="main-content">
				<platehead title="最近更新" :type="bookType.name+'类'" @refresh="handleRefresh" v-if='updateList.length > 0' />
				<u-row justify="start">
					<u-col v-for="item in updateList" :key="item.id" span="3">
						<card :name="item.name" :writer="item.writer" :id="item.id" :image="item.image"></card>
					</u-col>
				</u-row>
				<platehead title="系统推荐" :type="bookType.name+'类'" @refresh="handleRefresh" v-if='recommendList.length > 0' />
				<detailCard v-for="item in recommendList" :key="item.id" :name="item.name" :writer="item.writer" :is_over="item.is_over"
				 :type="item.type" :intro="item.intro" :id="item.id" :image="item.image" />
				<platehead title="完本小说" :type="bookType.name+'类'" @refresh="handleRefresh" v-if='overList.length > 0' />
				<u-row justify="start">
					<u-col v-for="item in overList" :key="item.id" span="3">
						<card :name="item.name" :writer="item.writer" :id="item.id" :image="item.image"></card>
					</u-col>
				</u-row>
			</view>
			<u-toast ref="uToast" />
		</scroll-view>
		<view class="load" v-if="loading">
			<u-loading mode="circle" size="50" color="rgb(146, 200, 255)" style="position: relative;bottom:300rpx;"></u-loading>
		</view>
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import {
		getUpdateList,
		getBannerList
	} from '../api/homepage.js'
	import {
		getSearchList
	} from '../api/list.js'
	import Banner from '../components/Banner'
	import Platehead from '../components/Platehead'
	import Card from '../components/Card'
	import DetailCard from '../components/DetailCard'
	export default {
		name: 'IndexItem',
		data() {
			return {
				loading: false,
				triggered: false,
				dataObject: {},
				bannerList: [],
				updateList: [],
				recommendList: [],
				overList: []
			};
		},
		components: {
			Banner,
			Platehead,
			Card,
			DetailCard
		},
		props: {
			bookType: Object,
		},
		created() {
			// this._freshing = false;
			// setTimeout(() => {
			// 	this.triggered = true;
			// }, 1000)
		},
		mounted() {},
		methods: {
			async getData() {
				if (this.loading) {
					return;
				}
				this.loading = true;
				await this.getBanner();
				await this.getUpdateList();
				await this.getRecommendList();
				await this.getOverList();
				this.loading = false;
			},
			// 获取轮播图
			getBanner() {
				return new Promise((resolve, reject) => {
					getBannerList({
							type: this.bookType.id,
							pageSize: 4
						})
						.then((res) => {
							this.bannerList = res.data.bookList;
							resolve('ok')
						})
						.catch((error) => {
							reject('error')
						});
				})
			},
			// 最近更新
			getUpdateList(page = 1) {
				return new Promise((resolve, reject) => {
					getSearchList({
							type: this.bookType.id,
							pageSize: 8,
							page,
							updateDay: 30,
						})
						.then((res) => {
							if (res.data.data.length >= 5) {
								this.updateList = res.data.data;
							}
							resolve('ok')
							return;
						})
						.catch((error) => {
							reject('error')
						});
				})
			},
			// 系统推荐
			getRecommendList(page = 1) {
				return new Promise((resolve, reject) => {
					getSearchList({
							type: this.bookType.id,
							pageSize: 3,
							page
						})
						.then((res) => {
							if (res.data.data.length >= 3) {
								this.recommendList = res.data.data;
							}
							resolve('ok')
							return;
						})
						.catch((error) => {
							reject('error')
						});
				})
			},
			// 完本小说
			getOverList(page = 1) {
				return new Promise((resolve, reject) => {
					getSearchList({
							type: this.bookType.id,
							pageSize: 8,
							page,
							isOver: 2,
						})
						.then((res) => {
							if (res.data.data.length >= 8) {
								this.overList = res.data.data;
							}
							resolve('ok')
							return;
						})
						.catch((error) => {
							reject('error')
						});
				})
			},
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
					this.$refs.uToast.show({
						title: '加载成功',
						type: 'success'
					})
				}, 2000)
			},
			onRestore() {
				this.triggered = 'restore';
			},
			handleRefresh(data) {
				switch (data.title) {
					case "最近更新":
						this.getUpdateList(data.currentPage);
						break;
					case "系统推荐":
						this.getRecommendList(data.currentPage);
						break;
					case "完本小说":
						this.getOverList(data.currentPage);
						break;
					default:
						break;
				}
			}
		}
	}
</script>

<style scoped>
	.page-box {
		flex: 1;
		flex-direction: column;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.load {
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
		background:white;
	}

	.main-content {
		padding: 0 40rpx;
		margin-bottom: 60rpx;
	}

	.bottom-line {
		font-size: 28rpx;
		padding: 36rpx 0;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: rgba(6, 27, 65, 0.35);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.index-item {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
	}
</style>
